/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:23:08
 */

import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import buttonAlignSVG from "./button_align.svg";
import buttonAlignHoverSVG from "./button_align_hover.svg";
import styles from "./toolBottomAlign.module.less";

interface Iprops {
}

// 下对齐工具
export default function ToolBottomAlign() {

  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);

  useEffect(() => autorun(() => {
    const { activeObjectId } = editorStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <Tooltip
      title="上对齐"
      placement="top"
      mouseLeaveDelay={0}
      mouseEnterDelay={0.5}
    >
      <div
        onClick={() => {
          designEditor.bottomAlign();
        }}
        onMouseEnter={() => {
          setHover(true);
        }}
        onMouseLeave={() => {
          setHover(false);
        }}
        className={clsx(styles.toolBottomAlign, visible && styles.visible)}
      >
        <img className={styles.icon} src={hover ? buttonAlignHoverSVG : buttonAlignSVG} alt="" />
      </div>
    </Tooltip>
  );

}